/*
 * @Title:支付组件
 * @Created by: ycq 
 */
<template>
	<view class="pay">
		<view class="pay-head">
			<text v-if="!showType">确认付款</text>
			<text v-if="showType">选择支付方式</text>
			<image v-if="!showType" style="padding: 40upx;" src="/static/close.png" @click="closePay" ></image>
			<image v-if="showType" style="padding: 40upx;" class="type-back" src="/static/jiantou.png" @click="backToPay" ></image>
			<!-- <image src="../static/jiantou.png"></image> -->
		</view>
		<view class="money" v-if="!showType">
			<text >￥{{money}}</text>
		</view>
		<view class="pay-info">
			<view v-if="!showType" class="info-line">
				<text class="pay-label">订单信息：</text>
				<text class="pay-label right">商务房</text>
			</view>
			<view v-if="!showType" class="info-line">
				<text class="pay-label">支付方式</text>
				<image class="jiantou" src="/static/jiantou.png" mode="" @click="toType"></image>
				<text class="pay-label right" @click="toType">{{nowType}}</text>
			</view>
			<view class="bankCard"  v-if="showType">
				<view class="info-line" @click="chooseType(item.id)" v-for="(item,index) in typeData" :key='index'>
					<image class="type-icon" :src="item.icon"></image>
					<text class="pay-label">{{item.name}}</text>
					<image v-if="item.isUsed" class="use" src="/static/payIcon/use.png" mode="" ></image>
					<image class="jiantou" :src="item.img" mode="" @click="toType"></image>
					
				</view>
			</view>
			
		</view>
		<view class="pay-btn" @click="buy">
			立即付款
		</view>
	</view>
</template>

<script>
	export default{
		props:['pageId'],
		data(){
			return{
				showType:false,
				nowType:'微信支付',
				pageName:'',
				money:698,
				payData:{
					payType:'',
					money:'',
					hotel:'',
					time:'',
				},
				typeData:[
					{
						name:'我的余额（剩余:￥200）',
						icon:'/static/balance.png',
						isUsed:true,
						id:1
					},
					{
						name:'微信支付',
						icon:'/static/payIcon/wx.png',
						isUsed:false,
						id:2
					},
					{
						name:'支付宝',
						icon:'/static/payIcon/zfb.png',
						isUsed:false,
						id:3
					},
					{
						name:'建设银行储蓄卡 (1122)',
						icon:'/static/payIcon/jianhang.png',
						isUsed:false,
						id:4
					},
					{
						name:'建设银行储蓄卡 (1632)',
						icon:'/static/payIcon/jianhang.png',
						isUsed:false,
						id:5
					},
					{
						name:'添加银行卡',
						icon:'/static/chatAdd.png',
						img:'/static/jiantou.png',
						isUsed:false,
						id:99
					}
				]
			}
		},
		methods:{
			closePay(){
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.exitPay();
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.exitPay();
				//#endif
			},
			toType(){
				this.showType = true
			},
			backToPay(){
				this.showType = false
			},
			buy(){
				var date = new Date();
				var year = date.getFullYear()
				var month = date.getMonth()+1
				var day = date.getDate()
				var time = year+'-'+month+'-'+day
				
				this.payData.payType = this.nowType
				this.payData.money = this.money
				this.payData.time = time
				
				uni.navigateTo({
					// url:'/pages/common/paySuccess?fromPage='+this.pageId
					url:'/pages/home/scenicSpot/enterPayPassword'
				})
				
				//#ifdef APP-PLUS|| MP-WEIXIN
				// this.$parent.paySuccess(this.payData);
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				// this.$parent.$parent.paySuccess(this.payData);
				//#endif
			},
			chooseType(id){
				if(id == 99){
					uni.navigateTo({
						url:'/pages/home/scenicSpot/enterPassword'
					})
				}else{
					this.typeData.forEach(item =>{
						if(item.isUsed && item.id!=id){
							item.isUsed = false
						}else if(item.id == id){
							item.isUsed = true
							this.nowType = item.name
						}
					})
					this.showType = false;
				}
			}
			
		},
		created() {
			
			document.body.style.overflow = 'hidden'
		}
	}
</script>

<style scoped>
	.pay{
		width: 750upx;
		height: 771upx;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		z-index: 30;
	}
	.pay-head{
		width: 750upx;
		height: 100upx;
		position: relative;
		border-bottom: #999999 solid 1upx;
	}
	.pay-head image{
		width: 26upx;
		height: 26upx;
		min-width: 15px;
		min-height: 15px;
		position: absolute;
		z-index: 35;
		float: left;
	}
	.type-back{
		transform: rotate(180deg);
	}
	.pay-head text{
		width: 750upx;
		height: 100upx;
		font-size: 36upx;
		text-align: center;
		line-height: 100upx;
		display: block;
		position: absolute;
		color: #333333;
		
	}
	.bankCard{
		width: 100%;
		height: 400upx;
		overflow: scroll;
		margin-top: 60upx;
	}
	.money{
		width: 750upx;
		height: 80upx;
		margin-top: 60upx;
		margin-bottom: 20upx;
	}
	.money text{
		width: 100%;
		height: 80upx;
		text-align: center;
		display: block;
		line-height: 80upx;
		font-size: 50upx;
	}
	.pay-info{
		width: 660upx;
		margin-left: auto;
		margin-right: auto;
		height: 250upx;
	}
	.info-line{
		width: 660upx;
		border-bottom: rgba(220,220,220,1.00) solid 1upx;
		height: 80upx;
	}
	.jiantou{
		width: 14upx;
		min-width: 14px;
		height: 26upx;
		min-height: 19px;
		margin-right: 10upx;
		margin-top: 25upx;
		margin-left: 20upx;
		float: right;
	}
	.pay-btn{
		width: 613upx;
		height: 88upx;
		position: absolute;
		bottom:37upx;
		left: 69upx;
		right: 69upx;
		text-align: center;
		line-height: 88upx;
		color: #FFFFFF;
		font-size: 30upx;
		border-radius: 50upx;
		background: -webkit-linear-gradient(left, #54B0FF,#577AFF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#577AFF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#577AFF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#577AFF);
		/* 标准的语法 */
	}
	.pay-label{
		font-size: 30upx;
		line-height: 80upx;
	}
	.right{
		float: right;
	}
	.type-icon{
		width: 48upx;
		height: 40upx;
		margin-top: 20upx;
		float: left ;
		margin-right: 20upx;
	}
	.use{
		width: 31upx;
		height: 26upx;
		margin-right: 10upx;
		margin-top: 30upx;
		margin-left: 20upx;
		float: right;
	}
</style>
